<template>
  <!-- 上线配置查询报表 -->
  <div class="m-view-onlineSetting m-window">
    <div class="m-condition">
      <el-row :gutter="5">
        <el-form :inline-message="true" label-position="left">
          <el-col :span="10" v-if="userType==1">
            <el-form-item label="供应商编码/名称" label-width="120px" class="rightItem">
              <el-input v-model="ruleForm.supplierCode" placeholder="请输入供应商编码/名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              :label="userType==1?'公司编码/名称':'客户编码/名称'"
              label-width="110px"
              class="rightItem"
            >
              <el-input
                v-model="ruleForm.companyCode"
                :placeholder="`请输入${userType==1?'公司':'客户'}编码/名称`"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="userType==1?2:12">
            <el-button type="primary" @click="search(1)">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="m-agTable m-bottom">
      <agGridComponents
        ref="onlineSetingGrid"
        :getGridOptions="gridOptions"
        :getColumnDefs="columnDefs"
        :getRowSelection="'multiple'"
        :isColFit="true"
      ></agGridComponents>
    </div>
    <div class="m-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick"
        :current-page="pageInfo.current"
        :page-sizes="[30,50,100,150,200]"
        :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import agGridComponents from '@/components/agGridComponents'
import authInfo from '@/public/authInfo'
import Msg from '@/public/message'
export default {
  data () {
    return {
      // 供应商编码/名称 
      searchValue: '',
      // 公司编码/名称
      companyValue: '',
      // 分页相关
      pageInfo: {
        current: 1,
        size: 30,
        total: 0
      },
      // 弹窗表单信息
      ruleForm: {
        companyCode: '',
        supplierCode: ''
      },
      // 公司信息下拉
      comOptions: [],
      // 供应商下拉
      supplierOptions: [],
      allSupplier: [],
      gridOptions: {},
      columnDefs: [],
      // 用户类型,4为供应商，1为内部用户
      userType: this.$global.user.userTypeId
    }
  },
  methods: {
    //   查询列表
    search (flag) {
      if (flag) this.pageInfo.current = 1
      const { current, size } = this.pageInfo
      const { supplierCode, companyCode } = this.ruleForm
      let params = {
        likeParams: {
          supplier: this.userType == 4 ? this.$global.supplierData.supplierCode : supplierCode,
          company: companyCode
        },
        current,
        size
      }
      this.$refs.onlineSetingGrid.loading = true
      this.$http.getOnlineSettingList(params).then(({ data }) => {
        this.$refs.onlineSetingGrid.loading = false
        if (data.code == 1) {
          this.$refs.onlineSetingGrid.gridOptions.api.setRowData(data.rows)
          this.pageInfo.total = data.total
        } else {
          Msg.showErrorMsg(data.info)
        }
      }).catch(err => {
        this.$refs.onlineSetingGrid.loading = false
        Msg.showErrorMsg(err.data.message)
      })
    },
    // 每页条数改变回调
    handleSizeChange (val) {
      this.pageInfo.size = val
      this.search(1)
    },
    // 页码改变
    handleCurrentChange (val) {
      this.pageInfo.current = val
      this.search()
    },
    // 上一页
    handlePrevClick (val) {
      this.pageInfo.current = val
      this.search()
    },
    // 下一页
    handleNextClick (val) {
      this.pageInfo.current = val
      this.search()
    },
    // 获取当前账户权限公司
    getAuthCompany () {
      authInfo.getAuthInfo().then(companyData => {
        this.comOptions = companyData
        const { companyCode } = this.comOptions[0]
        this.ruleForm.companyCode = companyCode
        if (this.userType == 1) {
          this.getAuthSuppliers(companyCode)
        }
      }).catch(err => {
        this.comOptions = []
        Msg.showErrorMsg(err)
      })
    },
    // 获取当前公司所有供应商
    getAuthSuppliers (companyCode) {
      this.$http.getAuthSupplierByCompanyCode({ name: companyCode }).then(({ data }) => {
        if (data.code == 1) {
          this.supplierOptions = data.rows
          this.allSupplier = data.rows
        } else {
          Msg.showErrorMsg(data.info)
        }
      }).catch(err => {
        this.formLoading = false
        Msg.showErrorMsg(err.data.message)
      })
    },
    // 选择公司回调
    companyChange (code) {
      if (code) {
        this.getAuthSuppliers(code)
      }
    },
    // 筛选供应商
    filterSupplier (value) {
      if (value != '') {
        this.supplierOptions = this.allSupplier.filter(item => item.supplierCode.indexOf(value) > -1 || item.supplierName.indexOf(value) > -1)
      } else {
        this.supplierOptions = this.allSupplier
      }
    },
    // 供应商下拉框获取焦点
    focusMethod () {
      const { companyCode } = this.ruleForm
      if (!companyCode) {
        Msg.showPopMsg('请先选择公司!')
        this.$refs.content.focus();
      }
    }
  },
  components: {
    agGridComponents
  },
  beforeMount () {
    this.gridOptions = {
      context: {
        componentParent: this
      },
      enableColResize: true,
      suppressRowClickSelection: true,
      onGridReady: function (params) {
        // params.api.sizeColumnsToFit()
      }
    }
    this.columnDefs = [
      { headerName: "编号", field: "supplierCode", width: 140, checkboxSelection: true },
      { headerName: "供应商名称", field: "supplierName", width: 160 },
      { headerName: "公司编号", field: "companyCode", width: 90 },
      { headerName: "公司名称", field: "companyName", width: 160 },
      {
        headerName: "订单模块",
        field: "orderEnableFlag",
        cellRenderer: function (params) {
          if (params.value == "1")
            return '<span class="ag-icon">启用</span>'
          else if (params.value == "0")
            return '<span class="ag-icon">禁用</span>'
        },
        width: 90
      },
      {
        headerName: "订单启用日期",
        field: "orderEnableDate",
        width: 120,
        cellRenderer: function (params) {
          if (params.value && params.value != "")
            return new Date(Date.parse(params.value.replace(/-/g, "/"))).Format("yyyy-MM-dd");
        }
      },
      {
        headerName: "对账模块",
        field: "accountEnableFlag",
        cellRenderer: function (params) {
          if (params.value == "1")
            return '<span class="ag-icon">启用</span>'
          else if (params.value == "0")
            return '<span class="ag-icon">禁用</span>'
        },
        width: 90
      },
      {
        headerName: "对账启用日期",
        field: "accountEnableDate",
        width: 120,
        cellRenderer: function (params) {
          if (params.value && params.value != "")
            return new Date(Date.parse(params.value.replace(/-/g, "/"))).Format("yyyy-MM-dd");
        }
      }
    ]
  },
  mounted () {
    this.search(1)
  }
};
</script>

<style>
</style>